<template>
  <div class="order-details">
    <Card>
      <p slot="title">订单详情</p>
      <i-form >
        <Form-item>
          <Row :gutter="16">
            <i-col  v-for="(item,index ) in detailsList" :key="index" span="12"  >
                <i-input  readonly style="margin-bottom: 15px;" v-model="item.value">
                  <span  slot="prepend">{{item.lable}}</span>
                </i-input>
            </i-col>
          </Row>
        </Form-item>
      </i-form>
      <i-button  style="margin-left: 100px;" class="com-btm" @click="comback()">返回</i-button>
    </Card>
  </div>
</template>

<script>
  export default {
    name:'order_details_page',
    data (){
      return {
        detailsList: [{
            lable: '代付订单号',
            value: 'G01202010120107117550005'
          },
          {
            lable: '商户单号',
            value: ''
          },
          {
            lable: '代付批次号',
            value: 'c9399e46797a4b45b7b49700580bb4b5'
          },
          {
            lable: '商户ID',
            value: '20000032'
          },
          {
            lable: '代付金额(元)',
            value: '1000'
          },
          {
            lable: '代付手续费(元)',
            value: '21'
          },
          {
            lable: '打款金额(元)',
            value: '1000'
          },
          {
            lable: '扣减金额(元)',
            value: '1021'
          },
          {
            lable: '通道ID',
            value: '5'
          },
          {
            lable: '账户属性',
            value: ''
          },
          {
            lable: '账户名',
            value: ''
          },
          {
            lable: '账户号(银行卡号)',
            value: ''
          },
          {
            lable: '转账订单号',
            value: ''
          },
          {
            lable: '状态',
            value: ''
          },
          {
            lable: '开户行所在省',
            value: ''
          },
          {
            lable: '开户行所在市',
            value: ''
          },
          {
            lable: '出款卡银行名称',
            value: ''
          },
          {
            lable: '出款卡银行开户名',
            value: ''
          },
          {
            lable: '出款卡银行卡号',
            value: ''
          },
          {
            lable: '银行代码',
            value: ''
          },
          {
            lable: '客户端IP',
            value: ''
          },
          {
            lable: '设备',
            value: ''
          },
          {
            lable: '通知地址',
            value: ''
          },
          {
            lable: '备注',
            value: ''
          },
          {
            lable: '创建时间',
            value: '2020-10-12 01:07:11'
          },
          {
            lable: '更新时间',
            value: '2020-10-12 01:07:11'
          }
        ],
      }
    },
    methods:{
      comback(){
        this.$router.push({
          name:'payment_order_page'
        })
      }
    }
  }
</script>

<style>
  .order-details .ivu-input-group-prepend{
    width: 30%;
  }
  .order-details .ivu-input{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:normal;
  }
</style>
